<template>
  <div class="board_sum">
    <div class="content">
      <div class="board_sum_title">公务员年度考核登记表</div>
      <div class="board_sum_tips">（ {{ emitData.year }}年度 ）</div>
      <div class="board_table">
        <table class="board_sum_table">
          <tr>
            <th class="first_th">姓名</th>
            <td>{{ emitData.userName }}</td>
            <th>性别</th>
            <td>
              <p v-if="extData.userGender === '1'">男</p>
              <p v-else-if="extData.userGender === '2'">女</p>
              <!-- <div v-if="emitData.isWrite == '1'">
                <el-select v-model="extData.userGender" placeholder="请选择" class="week_input">
                  <el-option
                    v-for="item in genderOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div> -->
            </td>
            <th>出生年月日</th>
            <td colspan="2">
              <p v-html="removeHtmlStyle(extData.birthday)"></p>
              <!-- <div v-else-if="emitData.isWrite == '1'">
                <el-date-picker
                  class="week_input"
                  v-model="extData.birthday"
                  type="date"
                  placeholder="选择出生年月日"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  :editable="false"
                  :clearable="false"
                  prefix-icon=" "></el-date-picker>
              </div> -->
            </td>
          </tr>
          <tr>
            <th class="first_th">政治面貌</th>
            <td colspan="3">
              <p v-html="removeHtmlStyle(extData.userFace)"></p>
              <!-- <div v-else-if="emitData.isWrite == '1'">
                <el-input
                  class="week_input"
                  type="textarea"
                  placeholder="请输入"
                  maxlength="6"
                  v-model="extData.userFace"
                  autosize></el-input>
              </div> -->
            </td>
            <th>任现职时间</th>
            <td colspan="2">
              <p v-html="removeHtmlStyle(extData.workTime)"></p>
              <!-- <div v-else-if="emitData.isWrite == '1'">
                <el-date-picker
                  class="week_input"
                  v-model="extData.workTime"
                  type="date"
                  placeholder="选择任现职时间"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  :editable="false"
                  :clearable="false"
                  prefix-icon=" "></el-date-picker>
              </div> -->
            </td>
          </tr>
          <tr>
            <th class="first_th">单位及职务职级</th>
            <td colspan="6">
              <p class="pre_line" v-if="emitData.isWrite == '0'" v-html="removeHtmlStyle(extData.orgPost)"></p>
              <div v-else-if="emitData.isWrite == '1'">
                <el-input
                  class="week_input"
                  type="textarea"
                  placeholder="请输入"
                  maxlength="30"
                  v-model="extData.orgPost"
                  autosize></el-input>
              </div>
            </td>
          </tr>
          <tr>
            <th class="first_th">从事或分管工作</th>
            <td colspan="6">
              <p class="pre_line" v-if="emitData.isWrite == '0'" v-html="removeHtmlStyle(extData.engageWork)"></p>
              <div v-else-if="emitData.isWrite == '1'">
                <el-input
                  class="week_input"
                  type="textarea"
                  placeholder="请输入"
                  maxlength="50"
                  v-model="extData.engageWork"
                  autosize></el-input>
              </div>
            </td>
          </tr>
          <tr>
            <th class="first_th">年度工作总结</th>
            <td class="board_td_l" colspan="6">
              <p class="pre_line" v-if="emitData.isWrite == '0'" v-html="removeHtmlStyle(extData.yearRecord)"></p>
              <div v-else-if="emitData.isWrite == '1'">
                <el-input
                  class="week_input"
                  type="textarea"
                  placeholder="请输入"
                  v-model="extData.yearRecord"
                  :autosize="{ minRows: 10, maxRows: 10000 }"
                  maxlength="1000"></el-input>
              </div>
            </td>
          </tr>
          <tr>
            <th class="first_th">参加脱产培训情况</th>
            <td class="board_td_l" colspan="6">
              <p class="pre_line" v-if="emitData.isWrite == '0'" v-html="removeHtmlStyle(extData.offJt)"></p>
              <div v-else-if="emitData.isWrite == '1'">
                <el-input
                  class="week_input"
                  type="textarea"
                  placeholder="请输入"
                  v-model="extData.offJt"
                  :autosize="{ minRows: 5, maxRows: 10000 }"
                  maxlength="500"></el-input>
              </div>
            </td>
          </tr>
          <tr>
            <th class="board_th_color first_th">主管领导评语和考核等次建议</th>
            <td colspan="6">
              <p class="no_data_sum"></p>
              <p class="sum_table_day">
                签名：
                <span></span>
                年
                <span></span>
                月
                <span></span>
                日
              </p>
            </td>
          </tr>
          <tr>
            <th class="board_th_color first_th">机关负责人或考核委员会意见</th>
            <td colspan="6">
              <p class="no_data_sum"></p>
              <p class="sum_table_day">
                盖章或签名：
                <span></span>
                年
                <span></span>
                月
                <span></span>
                日
              </p>
            </td>
          </tr>
          <tr>
            <th class="board_th_color first_th">本人意见</th>
            <td colspan="6">
              <p class="no_data_sum"></p>
              <p class="sum_table_day">
                签名：
                <span></span>
                年
                <span></span>
                月
                <span></span>
                日
              </p>
            </td>
          </tr>
          <tr>
            <th class="board_th_color first_th">未确定等次或不参加考核情况说明</th>
            <td colspan="6">
              <p class="no_data_sum"></p>
              <p class="sum_table_day">
                盖章或签名：
                <span></span>
                年
                <span></span>
                月
                <span></span>
                日
              </p>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { saveYearRecordForm } from '@apis/board.js'
import { cloneDeep } from 'lodash'
import moment from 'moment'
export default {
  components: {},
  props: {
    info: {
      type: Object,
      dafault() {
        return {}
      },
    },
    disabled: Boolean,
  },
  data() {
    return {
      extData: {
        userGender: '',
        birthday: '',
        userFace: '',
        workTime: '',
        orgPost: '',
        engageWork: '',
        yearRecord: '',
        offJt: '',
        isWrite: '0',
      },
      emitData: {},
      genderOptions: [
        {
          value: '1',
          label: '男',
        },
        {
          value: '2',
          label: '女',
        },
      ],
    }
  },
  watch: {
    info(news) {
      this.emitData = cloneDeep(news)
      if (this.$route.query.isEnd || this.disabled) {
        this.emitData.isWrite = '0'
      } else {
        this.emitData.isWrite = '1'
      }
      this.extData = Object.assign(this.extData, this.emitData)
      if (this.extData.birthday.length < 5) {
        this.extData.birthday = ''
      } else if (this.extData.birthday.indexOf('日') !== -1) {
        this.extData.birthday = moment(this.extData.birthday, 'YYYY年M月D日', true).format('YYYY-MM-DD')
      }
      if (this.extData.workTime.length < 5) {
        this.extData.workTime = ''
      } else if (this.extData.workTime.indexOf('日') !== -1) {
        this.extData.workTime = moment(this.extData.workTime, 'YYYY年M月D日', true).format('YYYY-MM-DD')
      }
    },
  },
  created() {},
  mounted() {
    this.emitData = cloneDeep(this.info)
    if (this.$route.query.isEnd || this.disabled) {
      this.emitData.isWrite = '0'
    } else {
      this.emitData.isWrite = '1'
    }
    this.extData = Object.assign(this.extData, this.emitData)
    if (this.extData.birthday.length < 5) {
      this.extData.birthday = ''
    } else if (this.extData.birthday.indexOf('日') !== -1) {
      this.extData.birthday = moment(this.extData.birthday, 'YYYY年M月D日', true).format('YYYY-MM-DD')
    }
    if (this.extData.workTime.length < 5) {
      this.extData.workTime = ''
    } else if (this.extData.workTime.indexOf('日') !== -1) {
      this.extData.workTime = moment(this.extData.workTime, 'YYYY年M月D日', true).format('YYYY-MM-DD')
    }
  },
  methods: {
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },

    addSum(saveStatus) {
      if (saveStatus === 1) {
        if (this.extData.yearRecord.length < 50) {
          return this.$message.warning('年度工作总结最少50个字')
        }
      }
      const data1 = {
        ...this.extData,
        saveStatus: saveStatus === 1 ? '1' : '0',
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }
      const formData = Object.assign(cloneDeep(this.emitData), data1)
      saveYearRecordForm({
        ...formData,
      }).then(res => {
        if (res.status === 200) {
          this.$emit('subMit', cloneDeep(formData))
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.board_sum {
  background-color: #fff;
  font-size: 14px;
  overflow-y: auto;
  padding: 0 20px;
  .content {
    width: 21cm;
    margin: auto;
  }
  .board_sum_title {
    font-size: 24px;
    text-align: center;
    height: 56px;
    line-height: 56px;
  }
  .board_sum_tips {
    font-size: 16px;
    text-align: center;
    padding-bottom: 10px;
    height: 30px;
  }
  .board_table {
    height: calc(100% - 90px);
    width: 100%;
    // overflow-y: auto;
  }
  .board_sum_table {
    width: 100%;
    border-collapse: collapse;
    color: #606266;
    .week_input {
      font-size: 14px;
      /deep/ .el-textarea__inner {
        line-height: 2;
      }
    }
    tr {
      border: 1px solid #b5b5b5;
      line-height: 28px;
      width: 100%;
      th {
        width: 14%;
        border: 1px solid #b5b5b5;
        font-weight: bold;
        text-align: center;
        padding: 0px 10px;
      }
      td {
        border: 1px solid #b5b5b5;
        text-align: center;
        padding: 5px 10px;
        width: 14%;
      }
      .no_data_sum {
        height: 65px;
        text-align: left;
        padding: 0px 10px;
        white-space: pre-wrap;
        color: #a7a7a7;
      }
      .sum_table_day {
        text-align: right;
        padding-right: 80px;
        color: #a7a7a7;
        span {
          padding: 0 15px;
        }
        :nth-child(1) {
          padding-left: 60px;
        }
      }
      .board_td_l {
        text-align: left;
      }
      .board_th_color {
        color: #a7a7a7;
      }
    }
    .week_input {
      /deep/ .el-textarea__inner {
        border: none;
        border-radius: 0;
        width: 100%;
      }
      /deep/.el-textarea__inner {
        border-radius: 0;
      }
      /deep/.el-input__inner {
        // background: #f5f6fa;
        border: none;
        border-radius: 0;
        width: 100%;
      }
    }
    .out_td {
      & > div {
        display: flex;
        align-items: center;
      }
      .week_input {
        width: 80%;
      }
    }
    .first_th {
      width: 16%;
    }
  }
}
</style>
